/*
 * @Author: your name
 * @Date: 2020-12-07 09:59:05
 * @LastEditTime: 2020-12-28 13:57:58
 * @LastEditors: Please set LastEditors
 * @Description: 侧边菜单的样式
 * @FilePath: \gitee-WeBi\css\main\sideBar\sideBar.less
 */
 /*  */
 @import "../../variables/theme.less";
 /*  */
@itemHeight:40px; // 子项高度和行高
@itemPL:52px;  // 子项左内边距
@itemPR:32px; // 子项右内边距
@itemMb:8px; // 子项之间的间距
@itemColor:rgba(0,0,0,.65); // 子项字体颜色
/* 左侧菜单栏 begin */
.zz-sider {
    position: absolute;
    top: @headerHeight;
    left: 0;
    bottom: 0;
    width: @siderWid;
    background-color:@panelBg;
    z-index: 4;
    box-shadow: 0px 1px 4px 0px @shadowColor;
    /*  */
    &:hover {
        .zz-sider_toggle_btn {
            right:-18px;
            width:18px;
        }
    }
}
.zz-sider,
.zz-sider_toggle_btn {
    transition:all .2s ease-in;
}
.zz-sider_toggle_btn {
    position:absolute;
    top:50%;
    right:0;
    width:0;/* 18px */
    height:36px;
    margin-top:-18px;
    border-radius: 0 6px 6px 0;
    background-color:@itemColor;
    cursor:pointer;
    color:@fsColorf;
    overflow:hidden;
    & > .el-icon-d-arrow-left {
        display:block;
    }
    & > .el-icon-d-arrow-right {
        display:none;
    }
}

.zz-sider .zz-sider-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.zz-sider .ds-navList-item {
    position: relative;
    height: @itemHeight;
    line-height: @itemHeight;
    margin-bottom: @itemMb;
    padding-left: @itemPL;
    padding-right: @itemPR;
    /* font-size: 14px; */
    color: @itemColor;
    transition:all .2s ease-in;

    &:after {
        display:none;
        content:"";
        position:absolute;
        top:0;
        bottom:0;
        right:0;
        width:2px;
        background-color:@themeColor;
    }
}

.zz-sider .ds-navList-item>.item-tag {
    position: relative
}

/* .zz-sider .ds-navList-item>.item-tag:before {
    display: none;
    content: "";
    position: absolute;
    top: 50%;
    left: -8px;
    margin-top: -3px;
    width: 6px;
    height: 6px;
    background-color: #3aa0ff;
    border-radius: 50%
} */

.zz-sider .ds-navList-item>.icon,
.zz-sider .ds-navList-item>.arrow,
.zz-sider .ds-navList-item>.icon-txt {
    position: absolute;
    top: 50%;
    transition:all .2s ease-in;
}

.zz-sider .ds-navList-item>.icon {
    margin-top: -8px;
    left: 24px;
    width: 16px;
    height: 16px;
    border-radius:4px;
}

.zz-sider .ds-navList-item>.icon-txt {
    margin-top: -8px;
    left: 24px;
    font-size:16px;
    line-height:16px;
    color:@themeColor;
    &.is-active {

    }
}

.zz-sider .ds-navList-item>.arrow {
    margin-top: -8px;
    right: 16px;
    width: 16px;
    height: 16px;
    transform:rotate(90deg);
    color:@itemColor;

    &.open {
        transform:rotate(-90deg);
    }
}

/* .zz-sider .ds-navList-item[data-level="1"] {
    border-radius: 18px
} */

/* .zz-sider .ds-navList-item[data-level="1"]:hover,
.zz-sider .ds-navList-item[data-level="1"].is-active {
    background-color: rgba(255, 255, 255, 0.2)
} */
.zz-sider .ds-navList-item[data-level="1"]:hover,
.zz-sider .ds-navList-item[data-level="1"].is-active,
.zz-sider .ds-navList-item[data-level="x"].is-active {
    & > .item-tag {
        color:@themeColor;
    }
}

.zz-sider .ds-navList-item[data-level="1"].is-only-first.is-active,
.zz-sider .ds-navList-item[data-level="x"].is-only-first.is-active,
.zz-sider.sider-toggle .ds-navList-item[data-level="1"].is-active {
    background-color:#E6F7FF;
}

.zz-sider .ds-navList-item[data-level="1"].is-only-first.is-active,
.zz-sider .ds-navList-item[data-level="x"].is-only-first.is-active,
.zz-sider.sider-toggle .ds-navList-item[data-level="1"].is-active {
    &:after {
        display:block;
    }
}
/*  */
.zz-sider.sider-toggle .ds-navList-item[data-level="1"]:hover {
    background-color:@panelBg;
    & > .icon {
        transform:scale(1.2);
    }
}

.zz-sider.sider-toggle .ds-navList-item[data-level="1"].is-active:hover {
    background-color:#E6F7FF;
    & > .icon {
        transform:scale(1);
    }
}
/*  */
.zz-sider .ds-navList-item[data-level="x"] {
    padding-left: 0px;
    height: @itemHeight;
    line-height: @itemHeight;
    padding-left: @itemPL;
    padding-right: @itemPR;
    /* text-align: center;
    border-radius: 18px */
}

/* .zz-sider .ds-navList-item[data-level="x"]+.ds-navList {
    padding: 14px 10px 0px;
    background-color: @panelBg;
    border:1px solid @themeColor;
} */
/* 侧边栏收起的时候 begin */
.zz-sider.sider-toggle {
    width: 40px;
    padding:0;
    background-color:@itemColor;
}

.zz-sider.sider-toggle .zz-sider_toggle_btn {
    & > .el-icon-d-arrow-left {
        display:none;
    }
    & > .el-icon-d-arrow-right {
        display:block;
    }
}

.zz-sider.sider-toggle .zz-sider-bg {
    display: none
}

.zz-sider.sider-toggle .ds-navList-item[data-level="1"] {
    padding-left: 0px;
    padding-right:0px;
}

.zz-sider.sider-toggle .ds-navList-item[data-level="1"]>.icon {
    width:20px;
    height:20px;
    top:50%;
    left: 50%;
    margin:-10px 0 0 -10px;
}

.zz-sider.sider-toggle .ds-navList-item[data-level="1"]>.item-tag {
    display: none
}

.zz-sider.sider-toggle .ds-navList-item[data-level="1"]>.arrow {
    display: none
}

.zz-sider.sider-toggle .ds-navList-item[data-level="1"]+.ds-navList {
    position: absolute;
    /* top: 50%; */
    top:0;
    left: calc(100% + 8px);
    /* transform: translateY(-50%); */
    /* padding: 14px 10px 0px; */
    width: 200px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 8px
}

.zz-sider.sider-toggle .ds-navList-item[data-level="x"],
.zz-sider .ds-navList-item[data-level="x"] + .ds-navList > .ds-navList-item[data-level="x"] {
    color:@fsColorf;
    padding:0 10px;
    text-align:center;
    border-radius:8px;
    &:hover {
        background-color:#E6F7FF;
        color:@fsColor666;
    }
}
/* 侧边栏收起的时候 end */
/*  */
.zz-sider .ds-navList-item[data-level="x"]+.ds-navList {
    position: absolute;
    top:0;
    left: calc(100% + 8px);
    width: 200px;
    padding: 10px 0;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 8px
}

/*  */
.zz-sider > .ds-navList-wrap {
    height:100%;
    max-height:100%;
    /* padding: 10px; */
}
.zz-sider > .ds-navList-wrap > .ds-navList-template {
    /* padding:10px; */
    transition:.1s all ease-in;
}
.zz-sider > .ds-navList-wrap.ds-scroll {
    overflow-y: scroll;
}

.ds-navList-wrap::-webkit-scrollbar {
    width: 0;
    height: 0
}

.ds-navList {
    position: relative;
    width: inherit;
    transform-origin: 0 0
}

.ds-navList-item {
    position: relative;
    cursor: pointer;
    user-select: none
}

.ds-navList-item[data-level="1"]+.ds-navList,
.ds-navList-item[data-level="x"]+.ds-navList {
    display: none
}

.ds-navList-item[data-level="1"]+.ds-navList.is-show,
.ds-navList-item[data-level="x"]+.ds-navList.is-show {
    display: block
}

/* .ds-navList-item[data-level="x"]+.ds-navList,
.ds-navList-item[data-index*="-"]+.ds-navList {
    position: absolute;
    top: 0px;
    left: 208px;
    width: 200px;
    border-radius: 8px;
} */

/* 侧边栏收起时（tab栏，内容区）对应的left值 */
.zz-sider + .zz-pagetabs + .zz-body.sideMenuToggle,
.zz-sider.sider-toggle + .zz-pagetabs,
.zz-sider.sider-toggle + .zz-pagetabs + .zz-body,
.zz-sider.sider-toggle + .zz-pagetabs + .zz-body.sideMenuToggle {
    left:40px;
}
/* 侧边栏隐藏时(tab栏，内容区)对应的left值 */
.zz-sider + .zz-pagetabs.sideMenuHide,
.zz-sider.sider-toggle + .zz-pagetabs.sideMenuHide,
.zz-sider + .zz-pagetabs + .zz-body.sideMenuHide,
.zz-sider.sider-toggle + .zz-pagetabs + .zz-body.sideMenuHide {
    left:0px;
}
/* 左侧菜单栏 end */
